<template>
  <div class="yxzb-container">
    <!-- 时间选择和操作按钮区域 -->
    <div class="search-area">
      <div class="time-picker-group">
        <el-date-picker
          v-model="startDate"
          type="date"
          placeholder="起始时间"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          class="time-picker"
        ></el-date-picker>
        <span class="time-separator">至</span>
        <el-date-picker
          v-model="endDate"
          type="date"
          placeholder="结束时间"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          class="time-picker"
        ></el-date-picker>
      </div>
      <div class="button-group">
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="handleExport">导出</el-button>
      </div>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        border
        size="medium"
        fit
      >
        <el-table-column
          prop="platform"
          label="平台名称"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="moduleCount"
          label="模块总数"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="registeredUsers"
          label="注册用户数"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="activeUsers"
          label="活跃用户数"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="loginCount"
          label="用户登录次数"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startDate: '',
      endDate: '',
      tableData: [
        {
          platform: 'OMS新平台',
          moduleCount: '24',
          registeredUsers: '1,256',
          activeUsers: '893',
          loginCount: '5,421'
        },
        {
          platform: 'OMS老平台',
          moduleCount: '42',
          registeredUsers: '3,872',
          activeUsers: '1,954',
          loginCount: '12,689'
        }
      ]
    }
  },
  methods: {
    handleQuery() {


      // 调用API获取数据 - 不传递空的日期参数
      const params = {};
      if (this.startDate && this.endDate) {
        params.startTime = this.startDate;
        params.endTime = this.endDate;
      }

      let proxy = {
        url: 'yxzb/list',
        datas: params
      }

      this.$oPost({ proxy }, (response) => {
        // 解析返回的数据格式 { code: 1000, data: { list: [...] } }
        if (response && response.code === 1000 && response.data && response.data.list) {
          this.tableData = response.data.list;
        } else {
          this.$message.error('获取数据失败');
          console.error('API返回数据格式不正确:', response);
        }

      }, (error) => {
        console.error('查询操作失败:', error);
        this.$message.error('获取数据时发生错误');

      });
    },
    handleExport() {


      // 调用导出API - 不传递空的日期参数
      const params = {};
      if (this.startDate && this.endDate) {
        params.startTime = this.startDate;
        params.endTime = this.endDate;
      }

      let proxy = {
        url: 'yxzb/export',
        datas: params,
        responseType: 'blob' // 重要：设置响应类型为blob以处理文件下载
      }

      this.$oPost({ proxy }, (response) => {
        console.log('response 类型:', typeof response);
  console.log('response 内容:', response);
  console.log('response 是 Blob 吗？', response instanceof Blob);
          // 根据当前激活的Tab重置加载状态
        // 创建下载链接
        const blob = new Blob([response], { type: 'application/vnd.ms-excel' });
        const fileName = `数据导出_${this.formatDate(new Date())}.xlsx`;

        // 创建并触发下载
        
          // 其他浏览器
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = fileName;
          link.style.display = 'none';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        this.$message.success(`导出数据成功！`);
      }, (error) => {
        this.$message.error('导出数据时发生错误');
        console.error('导出操作失败:', error);
      });
    },
    formatDate(date) {
      // 格式化日期为YYYY-MM-DD
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  },
  mounted() {
    // 组件挂载时自动执行查询，实现默认全查
    this.handleQuery();
  },
  computed: {
    // 计算属性可以在这里定义
  },
  watch: {
    // 监听器可以在这里定义
  }
}
</script>

<style scoped>
.yxzb-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.yxzb-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
  }

  .search-area {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .table-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  /* Element UI 组件样式覆盖 */
  .el-table {
    border-radius: 4px;
  }

  .el-table th {
    background-color: #fafafa;
    font-weight: 500;
  }

  .time-picker-group {
    display: flex;
    align-items: center;
  }

  .time-picker {
    width: 180px;
  }

  .time-separator {
    margin: 0 10px;
    color: #606266;
  }

  .button-group {
    display: flex;
    gap: 10px;
  }

/* 响应式设计 */
@media (max-width: 768px) {
  .search-area {
    flex-direction: column;
    gap: 15px;
  }

  .time-picker-group {
    width: 100%;
  }

  .time-picker {
    flex: 1;
  }

  .button-group {
    width: 100%;
    justify-content: center;
  }

  .table-container {
    overflow-x: auto;
  }
}
</style>
